<?php
/*
 * Ky nang chuyen mon
 */
?>
<?php
$form = $this->beginWidget('bootstrap.widgets.TbActiveForm', array(
    'id' => 'kynangchuyenmon-form',
    'type' => 'horizontal',
    'action' => Yii::app()->createUrl('ungvien/tintimviec/') . $hid != '' ? '?id=' . $hid : '',
    'enableClientValidation' => true,
    //'enableAjaxValidation' => true,
    'clientOptions' => array(
        'validateOnSubmit' => true,
    ),
        ));
?>
<legend id='step4' class='title-field title-jobs mt_20'><i class='icon icon-plus-sign mt_5 icon-white'></i> Kỹ năng chuyên môn</legend>
<div class='info-job'>
    <?php echo $form->dropDownListRow($model, 'kynang', CHtml::listData(Kynang::model()->findAllByAttributes(array('published' => 1)), 'id', 'name'), array('prompt' => '- Chọn - ', 'class' => 'span4')); ?>
    <div class='control-group showsub'>
        <ul id='sub-kynang'>
            <?php
            if (count($hoso_kynang) > 0) {
                foreach ($hoso_kynang as $item) {
                    if ($item->kynang->name == '')
                        continue;
                    ?>
                    <li style="display: list-item;">
                        <?php echo $item->kynang->name; ?>
                        <span class="del-sub-kn">Xóa</span>
                        <input type="hidden" value="<?php echo $item->kynang->id; ?>" name="KyNangForm[kynang][]">
                    </li>
                    <?php
                }
            }
            ?>
        </ul>
    </div>
    <div class='div-row'>
        <label class='mt w150'>&nbsp;</label>
        <p class='nn-row'>
            <?php $this->widget('bootstrap.widgets.TbButton', array('buttonType' => 'submit', 'type' => 'primary', 'label' => 'Lưu', 'icon' => 'icon-ok icon-white')); ?>
        </p> 
    </div>
</div>
<?php $this->endWidget(); ?>
<script>
    $(document).ready(function(){
<?php
if (count($hoso_kynang) > 0) {
    foreach ($hoso_kynang as $item) {
        if ($item->kynang->name == '')
            continue;
        ?>
            $('#KyNangForm_kynang option[value="<?php echo $item->kynang->id; ?>"]').attr('disabled','disabled');
            $('#KyNangForm_kynang option[value="<?php echo $item->kynang->id; ?>"]').attr('selected','selected');
            $('#KyNangForm_kynang option[value="<?php echo $item->kynang->id; ?>"]').addClass('sel');
        <?php
    }
}
?>
        /* ky nang */
        $('#KyNangForm_kynang').change(function(){
            
            var t = $(this);
            var op_value = t.val();
            //check
            if(op_value == '')
                return false;
            var op_text = $('#KyNangForm_kynang option[value="'+ op_value +'"]').text();
        
            $('<li>'+op_text+'<span class="del-sub-kn">Xóa</span><input type="hidden" name="KyNangForm[kynang][]" value="'+ op_value +'" /></li>').fadeIn(500).appendTo('#sub-kynang');

            $('#KyNangForm_kynang option[value="'+ op_value +'"]').attr('disabled','disabled');
            $('#KyNangForm_kynang option[value="'+ op_value +'"]').attr('selected','selected');
            $('#KyNangForm_kynang option[value="'+ op_value +'"]').addClass('sel');
            $('.del-sub-kn').click(function(e){
                $(this).parent().fadeOut(500).remove();
                $('#KyNangForm_kynang option[value="'+ op_value +'"]').removeAttr('selected');
                $('#KyNangForm_kynang option[value="'+ op_value +'"]').removeAttr('disabled');
                $('#KyNangForm_kynang option[value="'+ op_value +'"]').removeClass('sel');
                e.preventDefault();
            });
        });
        $('.del-sub-kn').click(function(e){
            $(this).parent().fadeOut(500).remove();
            $('#KyNangForm_kynang option[value="'+ op_value +'"]').removeAttr('selected');
            $('#KyNangForm_kynang option[value="'+ op_value +'"]').removeAttr('disabled');
            $('#KyNangForm_kynang option[value="'+ op_value +'"]').removeClass('sel');
            e.preventDefault();
        });
    });
</script>